﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
    <%@include file="/WEB-INF/jsp/header.jsp" %>
    <%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5全屏背景视频jQuery插件</title>
    <link href="<%=ctxPath %>/css/insideElementDemo.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <script src="http://www.jq22.com/jquery/html5.min.js"></script>
    <![endif]-->
</head>
<style>

    ::-webkit-scrollbar {/*滚动条*/
        width:5px;
    }
    ::-webkit-scrollbar-track {/*滚动槽*/
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
        border-radius:10px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条滑块*/
        border-radius:10px;
        background:rgba(0,0,0,0.1);
        -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
    }
</style>
<body>


<!--<div id="container">
    <div id="main">-->
<section class="section-first"  >
    <div class="text" style="text-align: center">
        <h1>Welcome System</h1>
        <h3>欢迎进入后台系统</h3>
    </div>
</section>

<!--</div>
</div>-->


<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="<%=ctxPath %>/js/vidbg.js"></script>
<script type="text/javascript">
    jQuery(function($){
        $('.section-first').vidbg({
            'mp4': 'http://39.108.113.7:8777/mvss.mp4',
            'poster': 'media/fallback.jpg',
        }, {
            // Options
            muted: true,
            loop: false,
            overlay: true,
        });
    });
</script>
</body>
</html>